<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<script type="text/javascript">
//append row to the HTML table
	function appendRow() {
	    var tbl = document.getElementById('my_table'), // table reference
	        row = tbl.insertRow(tbl.rows.length),      // append table row
	        i;
	    // insert table cells to the new row
	    for (i = 0; i < tbl.rows[0].cells.length; i++) {
	        createCell(row.insertCell(i), i, 'row');
	    }
	}
	 
	// create DIV element and append to the table cell
	function createCell(cell, text, style) {
	    var div = document.createElement('div'), // create DIV element
	        txt = document.createTextNode(text); // create text node
	    div.appendChild(txt);                    // append text node to the DIV
	    div.setAttribute('class', style);        // set DIV class attribute
	    div.setAttribute('className', style);    // set DIV class attribute for IE (?!)
	    cell.appendChild(div);                   // append DIV to the table cell
	}
	
	// append column to the HTML table
	function appendColumn() {
	    var tbl = document.getElementById('my_table'), // table reference
	        i;
	    // open loop for each row and append cell
	    for (i = 0; i < tbl.rows.length; i++) {
	        createCell(tbl.rows[i].insertCell(tbl.rows[i].cells.length), i, 'col');
	    }
	}
	
	// delete table rows with index greater then 0
	function deleteRows() {
	    var tbl = document.getElementById('my_table'), // table reference
	        lastRow = tbl.rows.length - 1,             // set the last row index
	        i;
	    // delete rows with index greater then 0
	    for (i = lastRow; i > 0; i--) {
	        tbl.deleteRow(i);
	    }
	}
	 
	// delete table columns with index greater then 0
	function deleteColumns() {
	    var tbl = document.getElementById('my_table'), // table reference
	        lastCol = tbl.rows[0].cells.length - 1,    // set the last column index
	        i, j;
	    // delete cells with index greater then 0 (for each row)
	    for (i = 0; i < tbl.rows.length; i++) {
	        for (j = lastCol; j > 0; j--) {
	            tbl.rows[i].deleteCell(j);
	        }
	    }
	}
</script>

<body>
	<table id="my_table" border="1">
		<tr><td>1</td><td>1</td></tr>
		<tr><td>1</td><td>1</td></tr>
	<table>
	
	<input type="button" value="Add row" onclick="javascript:appendRow()" class="append_row"/>
<input type="button" value="Add column" onclick="javascript:appendColumn()" class="append_column"/>
<input type="button" value="Delete rows" onclick="javascript:deleteRows()" class="delete"/>
<input type="button" value="Delete columns" onclick="javascript:deleteColumns()" class="delete"/>
<input type="button" value="Delete both" onclick="javascript:deleteColumns();deleteRows()" class="delete"/>
</body>
</html>